<template>
  <section>
    <el-row :class="data.type == 0 ? 'box1' : 'box2'">
      <el-col :span="12" v-for="(item, idx) of data.dataList" :key="idx">
        <el-row type="flex" justify="center" align="middle" class="boxStyle">
          <el-row>
            <el-row type="flex" justify="center">
              <span class="fontStyle">{{ item.name }}</span>
            </el-row>
            <el-row type="flex" justify="center">
              <span class="numberStyle">{{ item.con }}</span>
            </el-row>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected data: any;
}
</script>

<style lang="scss" scoped>
mr_vertical_10 {
  margin: 10px 0;
}
.mr_w_10 {
  margin: 0 10px;
}
.box1 {
  background-color: rgba(7, 123, 232, 0.05);
}
.box2 {
  background-color: rgba(255, 151, 0, 0.05);
}
.boxStyle {
  padding: 20px;
  .fontStyle {
    color: #077be8;
    font-size: 16px;
    line-height: 36px;
  }
  .numberStyle {
    font-size: 24px;
    margin-top: 10px;
  }
}
</style>


